<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选首页</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 引入轮播样式表 -->
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <!-- 引入首页样式表 index.css -->
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <!-- 页头 -->
    <header id="baseHead">
        <div class="wrapper">
            <!-- 右边logo区域 -->
            <section class="logo">
                <a href="#" title="返回首页">
                    <img src="../static/image/panda-logo.png" alt="logo">
                </a>
                <div class="right">
                    <h3>熊猫优选</h3>
                    <span>XIONG MAO YOU XUAN</span>
                </div>
            </section>
            <!-- 中间搜索区域 -->
            <div class="search">
                <span></span>
                <input type="text" name="find" placeholder="搜索商品，发现更多优惠">
                <p onclick="searchthing()">搜索</p>
            </div>
            <!-- 右边品牌保证区域 -->
            <section class="advantage">
                <ul>
                    <li>
                        <img src="../static/image/panda-logo1.png" alt="全程包邮">
                        <span>全程包邮</span>
                    </li>
                    <li>
                        <img src="../static/image/panda-logo2.png" alt="7天退换">
                        <span>7天退换</span>
                    </li>
                    <li>
                        <img src="../static/image/panda-logo3.png" alt="品质保证">
                        <span>品质保证</span>
                    </li>
                </ul>
            </section>
            <!-- 用户信息区域 -->
            <section id="userinfor">
                <img src="../static/image/懵.jpg" alt="用户头像" id="header">
                <label for="#">用户昵称：叶叶叶<span id="nick"></span></label>
            </section>
        </div>
    </header>
    <!-- 导航栏 -->
    <div id="nav">
        <ul>
            <li id="homePages" onclick="homePages()">首页</li>
            <li id="packageMail" onclick="packageMail()">9块9包邮</li>
            <li id="ticket" onclick="ticket()">超值大额券</li>
            <li id="coolOutfit" onclick="coolOutfit()">降温急救穿搭</li>
        </ul>
    </div>
    <!-- 商品区 -->
    <div id="main">
        <div class="framework">
            <!-- 左边商品分类选择区 -->
            <div class="sidebar">
                <menu>
                    <ul>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont1.png" alt="女装">
                                <p>女装</p>
                                <p><span>/</span>女鞋</p>
                            </div>
                        </li>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont2.png" alt="男装">
                                <p>男装</p>
                                <p><span>/</span>男鞋</p>
                            </div>
                        </li>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont3.png" alt="美妆">
                                <p>美妆</p>
                                <p><span>/</span>个护</p>
                            </div>
                        </li>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont4.png" alt="配饰">
                                <p>配饰</p>
                                <p><span>/</span>箱包</p>
                            </div>
                        </li>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont5.png" alt="零食国王">
                                <p>零食国王</p>
                            </div>
                        </li>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont6.png" alt="母婴用品">
                                <p>母婴用品</p>
                            </div>
                        </li>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont7.png" alt="手机">
                                <p>手机</p>
                                <p><span>/</span>数码</p>
                            </div>
                        </li>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont8.png" alt="内衣袜子">
                                <p>内衣袜子</p>
                            </div>
                        </li>
                        <li>
                            <div class="classificationItem">
                                <img src="../static/image/panda-iconfont9.png" alt="内娱">
                                <p>内娱</p>
                                <p><span>/</span>家居</p>
                            </div>
                        </li>
                    </ul>
                </menu>
            </div>
            <!-- 右边轮播展示区 -->
            <div class="banner-container">
                <div class="banner-container-top">
                    <!-- 轮播 -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">

                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                    <!-- 9.9包邮区 -->
                    <div class="banner-container-right" onclick="packageMail()">
                        <h3>9块9包邮</h3>
                        <div class="prompt">保你不吃亏</div>
                        <img src="../static/image/panda-img1.gif" alt="9块9包邮专题图">
                    </div>
                </div>
                <div class="banner-container-buttom">
                    <!-- 降温急救穿搭 -->
                    <div class="cool" onclick="coolOutfit()">
                        <h3>降温急救穿搭</h3>
                        <p class="prompt">速来抢购</p>
                        <span>GO</span>
                        <img src="../static/image/panda-clothes.png" alt="降温急救穿搭专题图">
                    </div>
                    <!-- 超值大额券 -->
                    <div class="bargain" onclick="ticket()">
                        <h3>超值大额券</h3>
                        <p class="prompt">优惠直击底价</p>
                        <span>GO</span>
                        <img src="../static/image/panda-coupon.png" alt="超值大额券专题图">
                    </div>
                    <!-- app二维码 -->
                    <div class="ERCode">
                        <p>扫码下载</p>
                        <p>发现更多惊喜</p>
                        <img src="../static/image/panda-QRcode.png" alt="app二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 精选商品标题 -->
    <div id="title">
        <h3>小编精选</h3>
        <p>每日更新</p>
    </div>
    <!-- 商品 -->
    <div id="choice">
        <ul class="commodity">
            <!-- 单个商品 -->
            <!-- 定义模板 -->
            <script type="text/html" id="product-list-temp">
                {{ each productList }}
                <li class="commodity-item" onclick="onProductDetail({{$value.id}})">
                    <div class="commodity-card">
                        <div class="commodity-container">
                            <img src="{{ $value.image }}" alt="网络错误">
                        </div>
                        <div class="commodity-msg">
                            <div class="commodity-title">{{ $value.title}}</div>
                            <div class="commodity-keyword">
                                {{if $value.platform==1}}
                                <span class="taobao">淘宝</span>
                                {{else}}
                                <span class="taobao">天猫</span>
                                {{/if}}
                                <span class="postage">包邮</span>
                            </div>
                            <div class="commodity-foot">
                                <div class="left">
                                    <span class="price">
                                        <span class="price-tag">￥</span>
                                        <span class="price-digit">{{ $value.price }}</span>
                                    </span>
                                    <span class="sale-num">{{ $value.saleNum}}人已买</span>
                                </div>
                                <span class="coupon-value">{{$value.couponValue}}</span>
                            </div>
                        </div>
                    </div>
                </li>
                {{ /each }}
            </script>
        </ul>
    </div>
    <!-- 加载更多商品 -->
    <div id="choice-more">
        <div class="choice-more-btn">查看更多</div>
    </div>
    <!-- 回到顶部 -->
    <div id="back-top">
        <img src="../static/image/back-top.png" alt="回到顶部">
    </div>
    <!-- 页脚 -->
    <footer id="footer">
        <div class="base-footer">
            <div class="footer-container">
                <img src="../static/image/panda-logo.png" alt="logo">
                <div class="footer-content">
                    <h1>熊猫优选</h1>
                    <p>年轻人网购首选</p>
                    <p>购物领券更省钱</p>
                </div>
                <div class="about-us">
                    <p><span>|</span><a href="#">下载app</a></p>
                </div>
                <div class="footer-buttom">
                    <img src="../static/image/panda-police.png" alt="公安logo" class="police-icon">
                    <p>
                        <span>浙公安网备案 33010602009949号-1</span>
                        ICP备案号:
                        <a href="#">浙ICP备17012864号-1</a>
                        |
                    </p>
                    <img src="../static/image/panda-police2.png" alt="公安logo" class="police-icon">
                    <p>
                        <a href="#">证照信息</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <!-- 安全认证lofo -->
    <div id="security">
        <a href="#"><img src="../static/image/panda-lable.png" alt="安全认证lofo"></a>
    </div>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/productDetails.js"></script>
</body>

</html>